<include file="public/head" />
</head>
<body>
<div class="am-modal am-modal-alert" tabindex="-1" id="fq_alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_alert_title"></div>
    <div class="am-modal-bd" id="fq_alert_info">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="fq_confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_confirm_title"></div>
    <div class="am-modal-bd" id="fq_confirm_info"></div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm="">确定</span>
    </div>
  </div>
</div>

<div class="am-whole am-text-sm">
    <header class="am-cf ">
        <ul class="am-avg-sm-3 am-padding-vertical-lg ">
            <li>
                <div class="am-total1 am-margin-left-sm am-padding-left-xs">
                    <span>我的粉丝</span>
                    <br>
                    <span>{$myincount}</span>
                </div>
                <div class="am-total1 am-margin-left-sm am-margin-top-sm am-padding-left-xs">
                    <span>邀请积分</span>
                    <br>
                    <span>{$myscore}</span>
                </div>
            </li>

            <li class="am-text-center">
                <div class="am-head-portrait">
                    <img src="{:avatar($info['id'], 200)}" class="am-center am-round">
                    <div class=" am-margin-top-sm am-vertical-align-left am-center">
                     <php>$username= $vo['wxnickname']!='' ? $vo['wxnickname'] : $vo['username']</php>
                        <span class="am-text-default">{$username}</span>
                        <div class="am-text-xs">关注时间:{$info.reg_time|date="Y.m.d",###}</div>
                    </div>
                </div>
            </li>
            <li class="am-text-right">
                <div class="am-padding-top-sm am-margin-right-sm am-padding-right-xs "><a class="am-register">邀请规则</a></div>
            </li>
        </ul>
    </header>

    <div class="am-ranking am-padding-vertical am-margin-horizontal-sm">
        <ul class="am-avg-sm-3">
            <li>
                <button type="button" value="1" class="am-butt-first am-padding-vertical-sm am-active">我的好友</button>
            </li>
            <li>
                <button type="button" value="2" class="am-padding-vertical-sm am-butt">邀请排行</button>
            </li>
            <li>
                <button type="button" value="3" class="am-butt-last am-padding-vertical-sm">邀请记录</button>
            </li>
        </ul>
    </div>

    <!-- 我的好友-->
    <div class="am-friend">
        <ul class="am-avg-sm-2 am-text-center am-margin-bottom-sm">
            <li class="am-vertical-align"><span class="am-vertical-align-middle am-text-sm">昵称</span></li>
            <li class="am-vertical-align"><span class="am-vertical-align-middle am-text-sm">关注时间</span></li>
        </ul>
        <volist name="myuser" id="vo">
               <ul class="am-avg-sm-2  am-margin-bottom-sm">
                <li>
                    <ul class="am-avg-sm-2">
                        <li class="am-text-right am-padding-right-xs">
                            <img src="{:avatar($vo['id'], 200)}" class=" am-round am-img"></li>
                            <php>$username= $vo['wxnickname']!='' ? $vo['wxnickname'] : $vo['username']</php>
                        <li class="am-vertical-align am-text-left"><span class="am-vertical-align-middle am-text-sm">{:getUsername($vo['id'])}</span></li>
                    </ul>
                </li>
                <li class="am-vertical-align am-text-center"><span class="am-vertical-align-middle am-text-sm">{$vo.reg_time|date="Y.m.d",###}</span>
                </li>
       	 </ul> 
        </volist>
            </div>
    <!--邀请排行-->
    <div class="am-list " style="display: none;">
        <ul class="am-avg-sm-3 am-text-center am-margin-bottom-sm">
            <li class="am-vertical-align"><span class="am-vertical-align-middle am-text-sm">排名</span></li>
            <li class="am-vertical-align"><span class="am-vertical-align-middle am-text-sm">用户</span></li>
            <li class="am-vertical-align"><span class="am-vertical-align-middle am-text-sm">粉丝</span></li>
        </ul>
	<volist name="inrank" id="vo">
        <ul class="am-avg-sm-3  am-margin-bottom-sm">
                <li class="am-vertical-align am-text-center"><span class="am-vertical-align-middle am-text-sm">{$i}</span></li>
                <li>
                    <ul class="am-avg-sm-2">
                        <li class="am-text-right am-padding-right-xs">
                            <img src="{:avatar($vo['parentid'], 200)}" class=" am-round am-img"></li>
                        <li class="am-vertical-align am-text-left"><span class="am-vertical-align-middle am-text-sm">{:getUsername($vo['parentid'])}</span></li>
                    </ul>
                </li>
                <li class="am-vertical-align am-text-center"><span class="am-vertical-align-middle am-text-sm">{$vo.count}</span>
                </li>
        </ul>
    </volist>
    </div>

    <!--邀请记录-->
    <div class="am-record" style="display: none;">
        <ul class="am-avg-sm-3 am-text-center am-margin-bottom-sm">
            <li class="am-vertical-align"><span class="am-vertical-align-middle am-text-sm">时间</span></li>
            <li class="am-vertical-align"><span class="am-vertical-align-middle am-text-sm">积分</span></li>
            <li class="am-vertical-align"><span class="am-vertical-align-middle am-text-sm">事件</span></li>
        </ul>
	  	<volist name="inhis" id="vo">
	            <ul class="am-avg-sm-3 am-text-center am-padding-xs  am-margin-top-xs">
	                <li>{$vo.add_time|frienddate}</li>
	                <li> <if condition="$vo['score'] gt 0">{$vo.score}<else/>{$vo.score}</if></li>
	                <li><span class="am-things">{:L($vo['action'])}</span></li>
	
	            </ul>
	    </volist> 
         
    </div>
</div>
<include file="public/foot" />
<div class="prompt am-text-center am-vertical-align">

    <div class="register-rule  am-vertical-align-middle am-text-center am-padding-top am-padding-bottom am-padding-horizontal-lg am-margin-horizontal-sm">

        <textarea id="rules" value="" class="am-text-sm" readonly="">{:C('itk_wxscore_rule.inv_rules')}</textarea>
        <br>
        <a class="confirm am-margin-top am-margin-bottom-sm am-padding-vertical-sm am-padding-horizontal-lg">明白了</a>
    </div>

</div>
<script>
    //弹框关闭按钮
    $(".am-register").click(function () {
        $(".prompt").css("display", "block");
        $(".register-rule").css("display", "inline-block");
    });
    $(".confirm").click(function () {
        $(".prompt").css("display", "none");
    });

    //栏目切换
    $('.am-butt').click(function () {
        $('.am-friend').hide();
        $('.am-record').hide();
        $('.am-list').show();
        $('.am-butt').addClass("am-active");
        $('.am-butt-first').removeClass("am-active");
        $('.am-butt-last').removeClass("am-active");

    });

    $('.am-butt-first').click(function () {

        $('.am-friend').show();
        $('.am-record').hide();
        $('.am-list').hide();
        $('.am-butt-first').addClass("am-active");
        $('.am-butt').removeClass("am-active");
        $('.am-butt-last').removeClass("am-active");

    });

    $('.am-butt-last').click(function () {

        $('.am-record').show();
        $('.am-friend').hide();
        $('.am-list').hide();
        $('.am-butt-last').addClass("am-active");
        $('.am-butt').removeClass("am-active");
        $('.am-butt-first').removeClass("am-active");

    });

    //数值颜色区分

    var scorelen = $('.am-score').length;
    for (var i = 0; i < scorelen; i++) {
        var num = $('.am-score').eq(i).html();

        if (num >= 0) {
            $('.am-score').eq(i).addClass("am-positive");
        }
        else {
            $('.am-score').eq(i).addClass("am-negative");
        }
    }

</script>

<style>
    body {
        color: #3d0505;
    }
    .am-whole {
        margin-bottom: 5rem;
    }
    header {
        background: url("__STATIC__/itaoke/mobile/images/invitation/Invitation_bg.png") no-repeat;
        background-size: cover;
    }
    .am-total1 {
        background: -webkit-linear-gradient(left, rgba(245, 50, 30, 0.5 ), rgba(245, 50, 30, 0));
        background: linear-gradient(left, rgba(245, 50, 30, 0.5 ), rgba(245, 50, 30, 0));
        max-width: 20rem;
    }
    .am-total1 span:nth-of-type(2) {
            color: #f2d618;
    }
    .am-head-portrait img {
        max-height: 5rem;
        max-width: 5rem;
    }
    .am-head-portrait span:nth-of-type(1),
    .am-total1 {
        color: white;
    }
    .am-register,
    a:hover,
    a:focus {
        color: white;
        cursor: pointer;
    }
    input, button, select, textarea {
        outline: none;
    }
    .am-friend li,
    .am-list li,
    .am-record li {
        height: 34px;
    }
    button {
        border: .1rem solid #a4a4a4;
        background: none;
        color: #8f8f8f;
        width: 100%;
    }
    .am-butt-first {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        border-right: none;
    }
    .am-butt-last {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        border-left: none;
    }
    .am-img {
        width: 34px;
        height: 34px;
    }

    .am-active,
    .confirm {
        color: white;
        background: #f54d23;
    }

    .am-positive {
        color: #5eb95e;
    }

    .am-negative {
        color: #f54d23;
    }

    /*邀请规则*/
    .prompt {
        display: none;
        position: fixed;
        top: 0;
        z-index: 1000;
        background-color: rgba(143,143,143,0.4);
        height: 100%;
        width: 100%;
    }

    textarea {
        width: 23rem;
        height: 30rem;
        border: 0rem;
    }


    .confirm,
    .register-rule,
    .am-total1 {
        border-radius: .5rem;
    }

    .register-rule {
        display: none;
        position: relative;
        line-height: 2;
        background: white;
        color: #8f8f8f;
        z-index: 20;
    }
</style>
</body>
</html>